<template>
  <div class="list-con">
    <!-- 查询 -->
    <product-search
      :listQuery="listQuery"
      :publishStatusOptions="publishStatusOptions"
    ></product-search>

    <el-card class="box-card">
      <span>数据列表</span>
      <el-button style="float: right; padding: 3px 0" type="text"
        >添加</el-button
      >
    </el-card>
    <!-- 数据列表显示   
  :data  标表示绑定在表格上的数据
  prop="date"  绑定的每一列显示的数据的列名，和数据中的key是匹配的
    -->
    <div class="product-con">
      <template>
        <el-table :data="productList" border style="width: 100%">
          <el-table-column prop="id" label="编号"></el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img class="list-img" :src="scope.row.pic" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column label="价格/货号">
            <template slot-scope="scope">
              <div>价格：￥ {{ scope.row.price }}</div>
              <div>货号：{{ scope.row.product_sn }}</div>
            </template>
          </el-table-column>
          <el-table-column label="标签">
            <template slot-scope="scope">
              <div>上架：{{ scope.row.publish_status | statusFilter }}</div>
              <div>新品：{{ scope.row.new_status | statusFilter }}</div>
              <div>推荐：{{ scope.row.recommand_status | statusFilter }}</div>
            </template>
          </el-table-column>
          <el-table-column label="排序" prop="sort"></el-table-column>
          <el-table-column label="销量" prop="sale"></el-table-column>
          <el-table-column
            label="审核状态"
            prop="verify_status"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleUpdateProduct(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="handleDeleteProduct(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 分页 
    @size-change="handleSizeChange"  当页面中显示的数据个数发生变化时触发该函数
    @current-change="handleCurrentChange"  翻页的时候触发这个函数
    current-page 当前页
    page-sizes 每页的条数设置
    page-size  每页显示的数量是多少条
    layout 显示了分页的那些项
    total 总条数
    -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
//import axios from "axios";
//import request from "../../../utils/request.js";
// 引入删除接口
import { fetchProductList, deleteProduct } from "@/api/product";
//引入 mixin
import productmixin from "./productmixin";
//引入查询组件
import productSearch from "./components/productSearch";
export default {
  name: "product",
  data() {
    return {
      productList: [],
      listQuery: {
        //用于查询和分页
        pageSize: 10, //每页显示多少条
        pageNum: 1, //当前页的页码
        name: null, //将要搜索的商品名
        product_sn: null, //货号
        publish_status: null, //上架状态 1 上架  0 未上架
        brand_id: null, //品牌id号
        product_category_id: null, //商品分类的 id
      },
      total: 0, //总数量
      publishStatusOptions: [
        //上架状态的options
        { value: 1, label: "上架" },
        { value: 0, label: "下架" },
      ],
    };
  },
  filters: {
    //上架、新品、推荐的状态显示
    statusFilter(value) {
      return value ? "是" : "否";
    },
  },
  mounted() {
    //获取商品数据
    this.getProductData();
  },
  methods: {
    async getProductData() {
      var data = await fetchProductList(this.listQuery); //需要传递分页的参数
      console.log(data);
      this.productList = data.product;
      this.total = data.total; //设置列表的总个数
    },
    //改变每页显示的条数
    handleSizeChange(count) {
      console.log("改变条数：", count);
      this.listQuery.pageSize = count;
      this.listQuery.pageNum = 1;
      //重新获取数据
      this.getProductData();
    },
    //更改当前页
    handleCurrentChange(num) {
      console.log("改变当前页：", num);
      this.listQuery.pageNum = num;
      //重新获取数据
      this.getProductData();
    },
    //查询数据
    handleSearch() {
      //获取数据
      this.getProductData();
    },
    //重置
    handleReset() {
      this.selectProductCateValue = [];
      //console.log(this.selectProductCateValue);

      this.listQuery = {
        //用于查询和分页
        pageSize: 10, //每页显示多少条
        pageNum: 1, //当前页的页码
        name: null, //将要搜索的商品名
        product_sn: null, //货号
        publish_status: null, //上架状态 1 上架  0 未上架
        brand_id: null, //品牌id号
        product_category_id: null, //商品分类的 id
      };
      this.getProductData();
    },
    //修改函数
    handleUpdateProduct(row) {
      this.$router.push("/pms/updateproduct/" + row.id);
    },
    //删除
    handleDeleteProduct(row) {
      console.log("删除触发了", row);
      // 弹出是否删除的提示
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log("需要调用api");
          // 确定删除后，调用删除api
          var res = await deleteProduct({ id: row.id });
          console.log(res);
          if (res.type == "success") {
            this.$message({
              type: "success",
              message: "删除成功!",
              duration: 1000,
            });
            //获取数据 重新加载页面
            this.getProductData();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //注册mixin
  mixins: [productmixin],
  components: { productSearch },
};
</script>

<style scoped lang="scss">
.list-con {
  padding: 10px;
}
.list-img {
  width: 80px;
  height: 80px;
}
</style>
